<template>
  <div class="app-container">
    <el-container>
      <el-main>
        <el-row class="p-r" justify="center" style="margin-bottom: 20px;">
          <el-col :offset="2" :span="3"><span class="f-14 f-w-5">影片：</span></el-col>
          <el-col :span="3" class="f-14">{{ pianData.film_name }}</el-col>
          <el-col :span="3" class="f-14 f-w-5">影厅：</el-col>
          <el-col :span="3" class="f-14">{{ pianData.ting_name }}</el-col>
          <el-col :span="3" class="f-14 f-w-5">播放时间：</el-col>
          <el-col :span="6" class="f-14">{{ formatDate(pianData.play_time) }}</el-col>
        </el-row>
        <seats :is-seat="true" :ting-data="tingList" :lock-data="lockList" @tingCheckedCall="tingCheckedCall"/>
        <el-row type="flex" justify="center" style="margin-top: 20px;border-top: 1px solid #e1e1e1;padding-top: 20px;">
          <el-col :span="2">
            <el-button v-if="buyData.length > 0">
              <router-link :to="{name:'pian-printer',params:{buyData:buyData,form:form}}" class="link-type">打票</router-link>
            </el-button>
          </el-col>
        </el-row>
      </el-main>
      <el-aside width="380px" style="padding-top: 30px;height: 500px;padding-left: 10px;padding-right: 10px;">

        <el-form :inline="true" size="mini" position="left" class="demo-form-inline">
          <el-row v-for="(ele,index) in buyData" :key="index" class="ele-row" type="flex" justify="center">
            <el-card shadow="always">
              <el-form-item label="座位">
                <el-input :value="ele.seat_num" style="width: 80px;"/>
              </el-form-item>
              <el-form-item label="票类">
                <el-select v-model="ele.pian_type" placeholder="票类" style="width: 100px;">
                  <el-option
                    v-for="item in pianTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
              <el-form-item label="服务费">
                <el-input v-model="ele.server_price" style="width: 65px;" placeholder="服务费"/>
              </el-form-item>
              <el-form-item label="票价">
                <el-input v-model="ele.price" style="width: 100px;" placeholder="票价"/>
              </el-form-item>
              <el-form-item label="票号">
                <el-input v-model="ele.pian_num" placeholder="票号"/>
              </el-form-item>
            </el-card>
          </el-row>
        </el-form>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import { parseTime } from '@/utils'

import moment from 'moment'

import Seats from '../../components/seats/index.vue'
import ElRow from 'element-ui/packages/row/src/row'
import ElCol from 'element-ui/packages/col/src/col'
import ElForm from '../../../node_modules/element-ui/packages/form/src/form.vue'
import ElInput from '../../../node_modules/element-ui/packages/input/src/input.vue'
import ElButton from '../../../node_modules/element-ui/packages/button/src/button.vue'

export default {
  name: 'PianBuy',
  components: {
    ElButton,
    ElInput,
    ElForm,
    ElCol,
    ElRow,
    Seats },
  data() {
    return {
      pianTypeList: [
        { label: '成人票', value: 1 },
        { label: '儿童票', value: 2 },
        { label: '会员票', value: 3 }
      ],
      tingList: [],
      pianData: [],
      buyData: [],
      buyList: [],
      lockList: [],
      form: {}
    }
  },
  created() {
    const params = this.$route.params

    this.pianData = params
    console.info(params)
    if (params.id) {
      //        this.tingList.push(params.ting)
      this.tingList = JSON.parse(params.ting.ting_data)

      if (params.buy_data) {
        this.lockList = JSON.parse(params.buy_data)
      }

      //        this.tingList.push(JSON.parse(params.ting.ting_data))
      //        console.info(params.ting.ting_data)

      //        this.filmList.push(params.film)
      //        this.checkedtingList = JSON.parse(params.ting.ting_data)
      //        params.play_time = new Date(params.play_time)
      //        this.ruleForm = params
      //        console.info(params)
    }
  },
  methods: {

    formatDate(time) {
      return parseTime(time)
    },

    tingCheckedCall(data) {
      var arr = []
      var nowTime = moment(new Date()).format('YYYY-MM-DD HH:mm')
      var playTime = moment(this.pianData.play_time).format('YYYY-MM-DD HH:mm')
      var buys = []
      for (var i = 0; i < data.length; i++) {
        var obj = data[i]
        const rowNum = parseInt(obj.row) > 9 ? obj.row : '0' + obj.row
        const colNum = parseInt(obj.number) > 9 ? obj.number : '0' + obj.number
        arr.push({
          film_name: this.pianData.film_name,
          play_time: playTime,
          ting_name: this.pianData.ting_name,
          price: this.pianData.price,
          pian_type: 1,
          type_name: this.pianTypeList[0].label,
          operation_account: this.pianData.operation_account,
          create_time: nowTime,
          pian_num: `${this.pianData.pian_num}${rowNum}${colNum}`,
          seat_num: `${obj.row}排${obj.number}座`,
          server_price: 0
        })

        buys.push(obj)
      }

      this.buyData = arr

      this.buyList = buys

      let buyss = []
      if (this.pianData.buy_data) {
        if (typeof this.pianData.buy_data === 'string') {
          buyss = JSON.parse(this.pianData.buy_data)
        } else {
          buyss = this.pianData.buy_data
        }
      }

      for (var j = 0; j < this.buyList.length; j++) {
        buyss.push(this.buyList[j])
      }

      this.form = { id: this.pianData.id, buy_data: JSON.stringify(buyss) }
    }

  }
}
</script>

<style lang="css">
  .search-row{
    padding: 10px 0px;
  }

  .f-14{
    font-size: 14px;
  }

  .f-w-5{
    font-weight: 550;
  }

  .p-r{
    padding:4px;
  }

  .ele-row{
    margin-bottom: 15px;
  }

</style>

